<template>
  <div class="sidebar">
    <el-menu
      class="sidebar-el-menu"
      :default-active="onRoutes"
      :collapse="collapse"
      background-color="#324157"
      text-color="#bfcbd9"
      active-text-color="#20a0ff"
      unique-opened
      router
    >
      <div class="userBox">
        <div class="useritem">
          <img src="../../assets/img/shizi.jpg" alt v-if="rolesId == 1">
          <img src="../../assets/img/huli.jpg" alt v-if="rolesId == 2">
          <img src="../../assets/img/huli.jpg" alt v-if="rolesId == 3">
          <img src="../../assets/img/huanxiong.jpg" alt v-if="rolesId == 4">
          <img src="../../assets/img/xiongmao.jpg" alt v-if="rolesId == 5">
          <img src="../../assets/img/xiongmao.jpg" alt v-if="rolesId == 6">
          <img src="../../assets/img/lang.jpg" alt v-if="rolesId == 8">
          <img src="../../assets/img/mao.jpg" alt v-if="rolesId == 9">
        </div>
        <div class="useritem" v-show="!collapse">
          <div>{{nickName}}</div>
          <!-- <div class="phone">{{bindstatus != 0? phone : '未绑定手机号'}}</div> -->
        </div>
        <div class="useritem" v-show="!collapse">
          <router-link to="/userinfo">
            <i class="el-icon-document" title="用户信息"></i>
          </router-link>
          <i class="el-icon-setting" title="修改密码" @click="visible = true"></i>
        </div>
      </div>
      <el-dialog v-dialogDrag title="修改登录密码" :visible.sync="visible" width="30%" :close-on-click-modal = "false">
        <el-form
          :model="ruleForm2"
          status-icon
          :rules="rules2"
          ref="ruleForm2"
          label-width="100px"
          class="demo-ruleForm"
        >
          <el-form-item label="请输入原密码" prop="oldpass">
            <el-input type="password" v-model="ruleForm2.oldpass"  autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="请输入新密码" prop="pass">
            <el-input type="password" v-model="ruleForm2.pass" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="确认密码" prop="checkPass">
            <el-input type="password" v-model="ruleForm2.checkPass" autocomplete="off"></el-input>
          </el-form-item>
          <!-- <el-form-item>
            <el-button type="primary" @click="submitForm('ruleForm2')">提交</el-button>
            <el-button @click="resetForm('ruleForm2')">重置</el-button>
          </el-form-item> -->
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button  @click="resetForm('ruleForm2')">重置</el-button> 
          <!-- @click="visible = false" -->
          <el-button type="primary"   @click="submitForm('ruleForm2')">确定修改</el-button>
        </span>
      </el-dialog>
      <template v-for="item in items">
        <template v-if="item.subs.length != 0">
          <el-submenu :index="item.index" :key="item.index">
            <template slot="title">
              <i :class="item.icon"></i>
              <span slot="title">{{ item.title }}</span>
            </template>
            <template v-for="subItem in item.subs">
              <el-submenu v-if="subItem.subs" :index="subItem.index" :key="subItem.index">
                <template slot="title">{{ subItem.title }}</template>
                <el-menu-item
                  v-for="(threeItem,i) in subItem.subs"
                  :key="i"
                  :index="threeItem.index"
                >{{ threeItem.title }}</el-menu-item>
              </el-submenu>
              <el-menu-item v-else :index="subItem.index" :key="subItem.index">{{ subItem.title }}</el-menu-item>
            </template>
          </el-submenu>
        </template>
        <template v-else>
          <el-menu-item :index="item.index" :key="item.index">
            <i :class="item.icon"></i>
            <span slot="title">{{ item.title }}</span>
          </el-menu-item>
        </template>
      </template>
    </el-menu>
  </div>
</template>
<script>
import bus from "../common/bus";
import { modifypassword } from "@/api/api";
import md5 from "js-md5";
export default {
  data() {
      var oldpass = (rule, value, callback) =>{
        if (value === '') {
             callback(new Error('请输入密码'));
        }
        callback();
      };
      var validatePass = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入密码'));
        } else {
          if (this.ruleForm2.checkPass !== '') {
            this.$refs.ruleForm2.validateField('checkPass');
          }
          callback();
        }
      };
       var validatePass2 = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请再次输入密码'));
        } else if (value !== this.ruleForm2.pass) {
          callback(new Error('两次输入密码不一致!'));
        } else {
          callback();
        }
      };
    return {
      id:'',
      rolesId:'',
      collapse: false,
      visible: false,
      nickName:'',
      bindstatus:'',
      ruleForm2: {
          pass: '',
          checkPass: '',
          oldpass:''
        },
        rules2: {
            oldpass: [
            { validator: oldpass, trigger: 'blur' }
          ],
          pass: [
            { validator: validatePass, trigger: 'blur' }
          ],
          checkPass: [
            { validator: validatePass2, trigger: 'blur' }
          ],
        },
      items: JSON.parse(sessionStorage.getItem('menuList'))
      // items: [
      //   {
      //     icon: "el-icon-lx-home",
      //     index: "dashboard",
      //     title: "首页"
      //   },
      //   {
      //     icon: "el-icon-lx-calendar",
      //     index: "1",
      //     title: "商户",
      //     subs: [
      //       {
      //         index: "mymerchants",
      //         title: "我的商户"
      //       },
      //       {
      //         index: "stores",
      //         title: "我的门店"
      //       },
      //       {
      //         index: "audit",
      //         title: "进件审核"
      //       }
      //     ]
      //   },
      //   {
      //     icon: "el-icon-lx-emoji",
      //     index: "2",
      //     title: "用户",
      //     subs: [
      //       {
      //         index: "channel",
      //         title: "渠道"
      //       },
      //       {
      //         index: "serviceproviders",
      //         title: "服务商"
      //       },
      //       {
      //         index: "bdlist",
      //         title: "业态"
      //       },
      //       {
      //         index: "account",
      //         title: "账号管理"
      //       }
      //     ]
      //   },
      //   {
      //     icon: "el-icon-lx-favor",
      //     index: "3",
      //     title: "交易",
      //     subs: [
      //       {
      //         index: "indent",
      //         title: "订单查询"
      //       },
      //       {
      //         index: "businessstatistics",
      //         title: "商户交易统计"
      //       },
      //       {
      //         index: "storestrading",
      //         title: "门店交易查询"
      //       },
      //       {
      //         index: "servicedeal",
      //         title: "服务商交易查询"
      //       },
      //       {
      //         index: "sharestats",
      //         title: "分润统计"
      //       },
      //       {
      //         index: "bankcurtain",
      //         title: "银行到账查询"
      //       },
      //       {
      //         index: "clearingcurtain",
      //         title: "清算查询"
      //       }
      //     ]
      //   },
      //   {
      //     icon: "el-icon-lx-warn",
      //     index: "4",
      //     title: "设备",
      //     subs: [
      //       {
      //         index: "eqcode",
      //         title: "二维码管理"
      //       },
      //       {
      //         index: "terminal",
      //         title: "终端管理"
      //       },
      //       {
      //         index: "facility",
      //         title: "设备管理"
      //       }
      //     ]
      //   },
      //   {
      //     icon: "el-icon-lx-warn",
      //     index: "5",
      //     title: "系统",
      //     subs: [
      //       {
      //         index: "system",
      //         title: "系统菜单",
      //         jurisdiction:'admin'
      //       },
      //       {
      //         index: "role",
      //         title: "角色管理"
      //       },
      //       {
      //         index: "log",
      //         title: "日志管理"
      //       },
      //       {
      //         index: "permission",
      //         title: "平台定制"
      //       }
      //     ]
      //   }
      // ]
    };
  },
  computed: {
    onRoutes() {
      return this.$route.path.replace("/", "");
    }
  },
  created() {
    // console.log(JSON.parse(sessionStorage.getItem('menuList')))
    // 通过 Event Bus 进行组件间通信，来折叠侧边栏
    bus.$on("collapse", msg => {
      this.collapse = msg;
    });
    let userinfo = JSON.parse(sessionStorage.getItem('userInfo'))
    this.nickName = userinfo.nickName
    this.bindstatus = userinfo.bindstatus
    this.phone = userinfo.phone
    // console.log(this.items)
    this.getPermissions();
  },
  methods: {
      //获取权限
      getPermissions(){
        var aaa = sessionStorage.getItem('userInfo')
        var bbb = JSON.parse(aaa)
        this.id = bbb.id
        this.rolesId = bbb.rolesId
        // console.log(this.fid)
      },
      submitForm(formName) {
         if(this.ruleForm2.pass.length < 6){
                    this.$message.error('密码长度不得小于6位');
        }else{
        this.$refs[formName].validate((valid) => {
          if (valid) {
            // alert('submit!');
            modifypassword({
              oldPassword: md5(this.ruleForm2.oldpass),
              newPassword: md5(this.ruleForm2.pass)
            },this.id).then(res => {
              // console.log(res)
              if(res.code == 405){
                sessionStorage. removeItem('token')
                this.$router.push('/login');
              }else if(res.code == 500){
                this.visible = false
                this.$message.error(res.message);
                this.$refs[formName].resetFields();
              }else if(res.code == 200){
                this.$message({
                  message: '修改成功',
                  type: 'success'
                });
                sessionStorage. removeItem('token')
                this.$router.push('/login');
                this.visible = false;
                this.$refs[formName].resetFields();
              }
            })
          } else {
            console.log('error submit!!');
            return false;
          }
        });
        }
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      }
  }
};
</script>

<style scoped>
.sidebar {
  display: block;
  position: absolute;
  left: 0;
  top: 70px;
  bottom: 0;
  overflow-y: scroll;
}
.sidebar::-webkit-scrollbar {
  width: 0;
}
.sidebar-el-menu:not(.el-menu--collapse) {
  width: 220px;
}
.sidebar > ul {
  height: 100%;
}
.userBox {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #fff;
  font-size: 14px;
  overflow: hidden;
}
.userBox .useritem img {
  width: 65px;
  height: 65px;
  border-radius: 50%
}
.userBox .useritem {
  line-height: 200%;
}
.userBox .useritem:nth-child(1) {
  width: 30%;
}
.userBox .useritem:nth-child(2) {
  width: 40%;
}
.userBox .useritem:nth-child(3) {
  width: 30%;
  text-align: right;
}
.userBox .useritem:nth-child(3) i {
  margin-right: 10px;
  font-size: 18px;
}
.phone {
  color: rgb(122, 139, 161);
  text-decoration: underline;
}
.el-icon-document {
  color: #fff;
}
.password {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 10px;
}
.password .tit {
  width: 30%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.password .tit i {
  color: red;
  margin-right: 5px;
}
</style>
